<html>
<head>
    <title>SIMILE | Timeline | Examples | Jewish History</title>
    <link rel='stylesheet' href='../styles.css' type='text/css' />
    <script src="../../api/timeline-api.js" type="text/javascript"></script>
    <script src="../examples.js" type="text/javascript"></script>
    <script>
        var tl;
        function onLoad() {
            var eventSource = new Timeline.DefaultEventSource(0);
            
            var theme = Timeline.ClassicTheme.create();
            theme.event.bubble.width = 320;
            
            var zones = [
                {   start:    "1700",
                    end:      "2100",
                    magnify:  5,
                    unit:     Timeline.DateTime.DECADE
                },
                {   start:    "1800",
                    end:      "2100",
                    magnify:  3,
                    unit:     Timeline.DateTime.YEAR,
                    multiple: 5
                }
            ];
            var zones2 = [
                {   start:    "1700",
                    end:      "2100",
                    magnify:  5,
                    unit:     Timeline.DateTime.DECADE
                },
                {   start:    "1800",
                    end:      "2100",
                    magnify:  3,
                    unit:     Timeline.DateTime.YEAR,
                    multiple: 10
                }
            ];
            
            var d = Timeline.DateTime.parseGregorianDateTime("1000");
            var bandInfos = [
                Timeline.createHotZoneBandInfo({
                    width:          "75%", 
                    intervalUnit:   Timeline.DateTime.CENTURY, 
                    intervalPixels: 250,
                    zones:          zones,
                    eventSource:    eventSource,
                    date:           d,
                    timeZone:       -6,
                    theme:          theme
                }),
                Timeline.createHotZoneBandInfo({
                    width:          "25%", 
                    intervalUnit:   Timeline.DateTime.CENTURY, 
                    intervalPixels: 70,
                    zones:          zones2,
                    eventSource:    eventSource,
                    date:           d,
                    overview:       true,
                    theme:          theme
                })
            ];
            bandInfos[1].syncWith = 0;
            bandInfos[1].highlight = true;
            
            tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
            tl.loadXML("jewish.xml", function(xml, url) {
                eventSource.loadXML(xml, url);
            });
            
            setupFilterHighlightControls(document.getElementById("controls"), tl, [0,1], theme);
        }
        function centerTimeline(year) {
            tl.getBand(0).setCenterVisibleDate(new Date(year, 0, 1));
        }

        var resizeTimerID = null;
        function onResize() {
            if (resizeTimerID == null) {
                resizeTimerID = window.setTimeout(function() {
                    resizeTimerID = null;
                    tl.layout();
                }, 500);
            }
        }
    </script>
</head>
<body onload="onLoad();" onresize="onResize();">
<ul id="path">
  <li><a href="http://simile.mit.edu/" title="Home">SIMILE</a></li>
  <li><a href="../../" title="Timeline">Timeline</a></li>
  <li><a href="../" title="Examples">Examples</a></li>
  <li><span>Jewish History</span></li>
</ul>

<div id="body">
    <h1>Jewish History</h1>
    <p>Sources:
        <a href="http://en.wikipedia.org/wiki/Timeline_of_Jewish_history">Wikipedia</a>.
        Titles of events have been phrased by David Huynh, author of this timeline example.
        The phrasing might not be of journalistic quality. The information in this example
        should not be used as an official source.
    </p>
    
    <div id="tl" class="timeline-default" style="height: 500px;">
    </div>
    
    <div style="width: 100%">
        <table style="text-align: center; width: 100%">
            <tr>
                <td><a href="javascript:centerTimeline(1);">1 AD</a></td>
                <td><a href="javascript:centerTimeline(250);">250 AD</a></td>
                <td><a href="javascript:centerTimeline(500);">500 AD</a></td>
                <td><a href="javascript:centerTimeline(750);">750 AD</a></td>
                <td><a href="javascript:centerTimeline(1000);">1000 AD</a></td>
                <td><a href="javascript:centerTimeline(1250);">1250 AD</a></td>
                <td><a href="javascript:centerTimeline(1500);">1500 AD</a></td>
                <td><a href="javascript:centerTimeline(1750);">1750 AD</a></td>
                <td><a href="javascript:centerTimeline(2000);">2000 AD</a></td>
            </tr>
        </table>
    </div>
    
    <div class="controls" id="controls">
    </div>
</div>
</body>
</html>